<template>
  <div>
    <el-row style="line-height: 32px">
      <div><span style="font-size: 14px;font-weight: 600">活动名称:</span> {{ formData.activityName }}</div>
    </el-row>
    <el-row style="line-height: 32px">
      <div><span style="font-size: 14px;font-weight: 600">备注:</span> {{ formData.remarks }}</div>
    </el-row>
    <el-row>
      <h4>关联设备:</h4>
      <el-table :data="tableData.meterDeviceDetails" border>
        <el-table-column label="所属项目" prop="projectName" />
        <el-table-column label="所属场景" prop="sceneInfoName" />
        <el-table-column label="设备编号" prop="deviceCode" />
        <el-table-column label="设备名称" prop="deviceName" />
        <el-table-column label="能源名称" prop="energyTypeName" />
        <el-table-column label="统计类型" prop="staticsTypeName" />
      </el-table>
    </el-row>
    <el-row v-if="formData.activityType === '2'">
      <h4>关联绿化:</h4>
      <el-table :data="tableData.sinkDetails" border>
        <el-table-column label="所属项目" prop="projectName" />
        <el-table-column label="所属场景" prop="sceneInfoName" />
        <el-table-column label="绿化名称" prop="typeName" />
        <el-table-column label="种植方式" prop="carbonSinkName" />
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'

export default {
  name: 'ActivityCarbonEmissionDetail',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {},
      tableData: {}
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.formData = data
        this.$api.activityCarbonEmission.detail2(data.id).then(response => {
          this.tableData = response.data
        })
      },
      deep: true,
      immediate: true
    },
    confirm() {
      this.submit()
    }
  },
  methods: {
    /**
     * change事件
     */
    handlerSelectData(config) {
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    },
    /**
     * 提交
     */
    submit() {
      this.$emit('onFinish', 'carbonEmissionRange-detail')
    }
  }
}
</script>
<style lang="scss" scoped>
.relation-data-container {
  margin-left: 120px;

  .relation-item {
    margin-bottom: 12px;
  }

  .relation-title {
    border: 1px solid #DCDFE6;
    line-height: 32px;
    padding-left: 20px;
    font-size: 16px;
  }

  .relation-data {
    border: 1px solid #DCDFE6;
    padding: 12px 16px 0 16px;
  }

  .row-title {
    line-height: 28px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 2px;
  }

  .row-item {
    line-height: 34px;
    display: flex;
    gap: 2px;
    margin-bottom: 10px;

    .el-col:not(:last-child) {
      background: #DCDFE6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
